<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <!-- 语法:v-for="{{}}"  错误展示
    v-for="{item,index} in xxx " :key="yyy"
     遍历数组 对象                   (这两个用的很少)

    -->
    <!--  -->
    <div id="app">
      <ul>
        <!-- 不需要写的第二个参数 可以不写,但官方建议去写-->
        <li v-for="person in people" :key="person.id">
            {{person.name}}---{{person.age}}
        </li>
      </ul>

      <h2>汽车</h2>
      <ul>
        <li v-for="(value,key) in car" :key="key">
            {{key}}---{{value}}
        </li>
      </ul>
      <hr />
       <h2>下面的非常少用</h2>
       <h2>字符串</h2>
       <ul>
        <li v-for="(char,index) in str" :key="index">
            {{index}}---{{char}}
        </li>
       </ul>

       <!-- 遍历指定的次数 -->
       <h2>指定次数</h2>
       <ul>
        <li v-for="(num,index) in 5" :key="index"> 
            {{index}}---{{num}}
        </li>
       </ul>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
            people:[
                {id:"001",name:"alex",age:33},
                {id:"002",name:"jack",age:13},
                {id:"003",name:"bobe",age:43},
                
            ],
            car:{
                name:"布加迪威龙",
                price:"买不起",
                color:"管我什么事,反正我买不起"
            },
            str:"ciao"
        },
      });
    </script>
  </body>
</html>
